@extends('base')

@section('title', __('Translation Product'))

@section('content')
    @php
        use App\Enumerables\Currency;
        use Illuminate\Support\Facades\Auth;

        $version = config('app.version');
        $language = config('app.locale');
        $currency = $_COOKIE['currency'] ?? Currency::GBP;
        $currencySign = ($currency == Currency::GBP) ? '£' : '¥';
        $auth = Auth::check();
    @endphp
    <div class="ui basic segment no-margin">
        <div class="ui grid">
            <div class="two wide column"></div>
            <div class="ten wide column">
                <div class="ui breadcrumb">
                    <a href="{{ route('home') }}" class="section">{{__('Home')}}</a>
                    <i class="right angle icon divider"></i>
                    <a href="{{ route('showTranslationHome') }}" class="section">{{__('Translation')}}</a>
                    <i class="right angle icon divider"></i>
                    <div class="active section ellipsis">
                        {{$service->business_name}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="translation-product">
        @include('translation::layouts.components.product.product_config')

        @foreach($translationModules as $module)
            @if($module->type == TranslationModuleTypes::BARCHART)
                @include('translation::layouts.components.product.product_promo', ['module'=>$module])
                @continue
            @endif

            @if($module->type == TranslationModuleTypes::DOTS3)
                @foreach($module->three_dots as $dot)
                    @include('translation::layouts.components.product.product_highlight', ['dot'=>$dot])
                @endforeach
                @continue
            @endif

            @if($module->type == TranslationModuleTypes::CAROUSEL)
                @include('translation::layouts.components.product.product_carousel', ['carousels'=>$module->carousel])
                @continue
            @endif

            @if($module->type == TranslationModuleTypes::GRAPHIC)
                @include('translation::layouts.components.product.product_details', [
                    'mmGraphics'=>$module->graphics,
                    'showTitle'=>!empty($module->titleFiled)
                ])
                @continue
            @endif

            @if($module->type == TranslationModuleTypes::AUTOSCROLLING)
                @foreach($module->auto_scrolling as $scroll)
                    @include('translation::layouts.components.product.product_review', ['scroll'=>$scroll])
                @endforeach
            @endif
        @endforeach

        {{--Consulte Us QR code modal--}}
        @include('common.modals.contents.qr_modal', [
            'header'=>__('Signed up successfully_2'),
            'image'=>$randomStaffContact->wechatQR ?? (config('locations.systemImage.asset').'QRWechat.jpg'.'?'.$version),
            'subText'=>__('chat-with-consultant')
        ])
        {{--Sales QR code modal--}}
    </div>
    @include('modals.add_to_cart_validation_modal')
    <script>
        $(function () {
            var animatedDot = $('.product-highlight .loader-left .dot:nth-child(6n)');
            var parent = animatedDot.parents('.product-highlight');
        
            animatedDot.on('animationend', function () {
                parent.removeClass('animating');
            
                setTimeout(function () {
                    parent.addClass('animating');
                }, 1);
            });
        });
    </script>

    <script>
        var stages;

        @if(\Illuminate\Support\Facades\Auth::check())
            var cart_bag = JSON.parse('{!!session()->has('cartTranslation') ? session('cartTranslation') : '[]'!!}');
            @php
                session()->forget('cartTranslation');
            @endphp
            if (cart_bag.length !== 0) {
                addCourseToCart(cart_bag.translationId, '{{route('addTranslationToCart')}}', cart_bag.amountInputName, cart_bag.translationData);
            }
        @endif

        function translationCartClicked(translationId, amtInputName, addTranslationArray) {
            $.ajax({
                type: 'POST',
                url: '{{route('guestAddToCartTranslation')}}',
                data: {
                    'translationId': translationId,
                    'amountInputName' : amtInputName,
                    'translationData' : addTranslationArray || null,
                    '_token': '{{csrf_token()}}',
                }
            });
            window.location.href = "{{route('authorization-page')}}";
        }
    </script>

    <script>
        $(window).on('load', function(){
            $('.slider').slick({
                dots: false,
                infinite: false,
                accessibility: true,
                speed: 300,
                slidesToShow: 4,
                slidesToScroll: 1,
                lazyLoad: 'ondemand',
                prevArrow: '<div class="slick-prev slick-arrow" aria-label="Previous"></div>',
                nextArrow: '<div class="slick-next slick-arrow" aria-label="Next"></div>'
            });

            initComparisons();
        });

        function initComparisons() {
            var x, i;
            x = document.getElementsByClassName("comparison-overlay");

            for (i = 0; i < x.length; i++) {
                compareImages(x[i]);
            }

            function compareImages(img) {
                var slider, clicked = 0, w, h;

                w = img.offsetWidth;
                h = img.offsetHeight;

                img.style.width = (w / 2) + "px";

                slider = document.createElement("img");
                slider.setAttribute("class", "comparison-slider");
                slider.setAttribute("src", "{{config('locations.systemImage.asset').'slider.png'}}?{{$version}}");

                img.parentElement.insertBefore(slider, img);

                slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
                slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";

                slider.addEventListener("mousedown", slideReady);

                window.addEventListener("mouseup", slideFinish);

                slider.addEventListener("touchstart", slideReady);

                window.addEventListener("touchstop", slideFinish);

                function slideReady(e) {
                    e.preventDefault();

                    clicked = 1;

                    window.addEventListener("mousemove", slideMove);
                    window.addEventListener("touchmove", slideMove);
                }

                function slideFinish() {
                    clicked = 0;
                }

                function slideMove(e) {
                    var pos;
                    if (clicked === 0) return false;

                    pos = getCursorPos(e);

                    if (pos < 0) pos = 0;
                    if (pos > w) pos = w;

                    slide(pos);
                }

                function getCursorPos(e) {
                    var a, x = 0;

                    e = e || window.event;
                    a = img.getBoundingClientRect();

                    x = e.pageX - a.left;
                    x = x - window.pageXOffset;
                    return x;
                }

                function slide(x) {
                    img.style.width = x + "px";
                    slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
                }
            }
        }
    </script>

    <script>
        $(function () {
            $('.stage', '.review-stages').on('click', function(){
                clearTimeout(stages);

                jump($(this).attr('data-stage'));

                stages = setTimeout(wait, 5000);
            })
        });

        function wait() {
            jump();
            stages = setTimeout(wait, 3000);
        }

        function jump(newStage) {
            var activeDot = $('.stage.active', '.product-review');

            var stage = activeDot.attr('data-stage');

            if(newStage) {
                stage = newStage;
            } else {
                stage++;
                if(stage === 4) {
                    stage = 1;
                }
            }

            activeDot.removeClass('active');
            $('.stage-image.active', '.review-stage-content').removeClass('active');
            $('.stage[data-stage="'+stage+'"], .stage-image[data-stage="'+stage+'"]', '.product-review').addClass('active');
        }

        setTimeout(function(){
            stages = wait();
        }, 3000);
    </script>

    <script>
        var previewCarousel = null;

        function carouselPreview(index) {
            if(previewCarousel !== null) {
                moveCarousel(index);
                openCarouselPreview();
                return true;
            }

            $.ajax({
                type: 'GET',
                url: "{{route('getCarouselPreview')}}",
                data: {
                    'translationId':'{{$service->id}}',
                    'language':'{{$language}}',
                    'index':index
                },
                success: function (data) {
                    $('body').addClass('no-scroll').prepend(data);

                    deployPreview(index);
                }
            });
        }

        function deployPreview(index) {
            setActiveSidebarItem(index);

            previewCarousel = $('.preview-slider', 'body').slick({
                dots: false,
                infinite: true,
                accessibility: true,
                speed: 300,
                slidesToShow: 1,
                slidesToScroll: 1,
                lazyLoad: 'ondemand',
                prevArrow: '<div class="slick-prev slick-arrow" aria-label="Previous"><img src="{{config('locations.systemImage.asset').'chevron_right.png'}}"></div>',
                nextArrow: '<div class="slick-next slick-arrow" aria-label="Next"><img src="{{config('locations.systemImage.asset').'chevron_right.png'}}"></div>',
                initialSlide: parseInt(index),
                variableWidth: true
            }).on('beforeChange', function (event, slick, currentSlide, nextSlide) {
                setActiveSidebarItem(nextSlide);
            });
        }

        function moveCarousel(index) {
            previewCarousel.slick(
                'slickGoTo', parseInt(index)
            )
        }

        function setActiveSidebarItem(index) {
            $('.sidebar-item[data-index="item-'+index+'"]').addClass('active')
                .siblings('.sidebar-item')
                .removeClass('active');
        }

        function closeCarouselPreview() {
            $('.product-carousel-preview').addClass('hidden');
            $('body').removeClass('no-scroll');
        }

        function openCarouselPreview() {
            $('.product-carousel-preview').removeClass('hidden');
            $('body').addClass('no-scroll');
        }
    </script>
@endsection