@php
    $chargingText = ($service->charging_method == TranslationChargingMethods::WORD_COUNT) ?__('Word Count') : __('Number of Pages');
@endphp
<div class="product-configuration">
    <div class="col col-left">
        <div class="image-container">
            <img class="image" src="{{config('locations.translations.asset').$service->cover_image}}">
        </div>

        <div class="slider {{(count($carousel) < 5)?'short':''}}">
            @foreach($carousel as $carouselItem)
                <div class="item" onclick="carouselPreview('{{$loop->index}}')">
                    <img class="slide-image" data-lazy="{{config('locations.translationsCarousel.asset').$carouselItem->carousel_image}}">
                </div>
            @endforeach
        </div>
    </div>

    <div class="col col-right">
        <div class="description">
            <div class="title font-title">
                {{$service->business_name}}
            </div>

            <div class="text">
                {{$service->description}}
            </div>

            <div class="note">
                *{{__('electronic-translation-note')}}
            </div>
        </div>

        <div class="configuration">
            @include('translation::layouts.components.product.support.config.config_direction')

            @include('translation::layouts.components.product.support.config.config_time')

            @if($service->charging_method == TranslationChargingMethods::WORD_COUNT)
                @include('translation::layouts.components.product.support.config.config_words')
            @else
                @include('translation::layouts.components.product.support.config.config_pages')
            @endif

            @include('translation::layouts.components.product.support.config.config_summary')
        </div>
    </div>
    <script src="{{ asset('js/UrlHandler.js' ).'?'.$version }}"></script>
    <script>
        var UrlHandler = new UrlHandler('{{route('showTranslationProduct', ['ID' => $service->id])}}');
        window.onpopstate = function(event) {
            if(document.location.href != localStorage.getItem('courseSortOrder')){
                location.reload();
            }
        };
        var config = {
            'direction': '{{$preset['direction'] ?? ''}}' || null,
            'time': '{{$preset['time']?? '' }}' || null,
            'count': '{{$preset['count']?? '' }}' || null
        };

        $(function(){
            UrlHandler.setParameters(config);
            $('.direction-input, .time-input').on('change', function(){
                var label = $(this).next('.label');

                config[$(this).attr('name')] = $(this).val();

                updateSelection(label.attr('data-section'), $(label).html());
                toggleSection(label.attr('data-section'), false);

                if($(this).hasClass('direction-input')) {
                    $('#translation-time').removeClass('disabled');
                    toggleTimeLabels($(this));
                } else {
                    $('#translation-pages, #translation-words').removeClass('disabled');
                    calculatePrice();
                }
            });

            $('.pages-control').on('click', function(){
                var input = $('.pages-input');
                var value = (parseInt(input.val()) || 0) + parseInt($(this).attr('data-value'));

                if(value <= 1) {
                    $('.pages-control.minus').addClass('disabled');
                } else {
                    $('.pages-control.minus').removeClass('disabled');
                }

                if(value < 10000) {
                    $('.pages-control.plus').removeClass('disabled');
                } else {
                    $('.pages-control.plus').addClass('disabled');
                }

                if(value >= 1) {
                    $('.pages-button').removeClass('disabled');

                    if(value <= 10000) {
                        input.val(value);
                    }
                }
            });

            $('.pages-input, .words-input').on('input', function(){
                var value = $(this).val().replace(/\D/g,'');

                if(value >= 1) {
                    $('.add-to-bag-btn[data-input="'+$(this).attr('id')+'"]').removeClass('disabled');
                } else {
                    $('.add-to-bag-btn[data-input="'+$(this).attr('id')+'"]').addClass('disabled');
                }

                $(this).val(value);
            });

            if(config['direction']) {
                $('.direction-input[data-language="'+config['direction']+'"]').prop('checked', true).trigger('change');

                if(config['time']) {
                    $('#time-'+config['direction']+'-'+config['time']).prop('checked', true).trigger('change');

                    if(config['count']) {
                        var type = 'pages';

                        $('.words-input, .pages-input').val(config['count']).trigger('input');

                        if('{{$service->charging_method}}' === '{{TranslationChargingMethods::WORD_COUNT}}') {
                            type = 'words';
                        }

                        saveCount('translation-'+type, type+'-input', '{{$chargingText}}');
                    }
                }
            }
        });

        function toggleSection(id, open) {
            id = '#'+id;

            if(open) {
                $('.selected', id).addClass('force-hidden');
                $('.available', id).removeClass('force-hidden');
            } else {
                $('.selected', id).removeClass('force-hidden');
                $('.available', id).addClass('force-hidden');
            }
        }

        function toggleTimeLabels(input) {
            $('.time-label:not(.force-hidden)').addClass('force-hidden');

            var checked = $('.time-input:checked');

            if(checked.val()) {
                $('#time-'+input.attr('data-language')+'-'+checked.val()+' + .time-label').trigger('click');
            } else {
                calculatePrice();
            }

            $('.time-label[data-language="'+input.attr('data-language')+'"]').removeClass('force-hidden');
        }

        function updateSelection(id, text){
            $('.selected .text', '#'+id).html(text);
        }

        function saveCount(id, inputId, text, maxCount) {
            var input = $('#'+inputId);
            var count = input.val();

            if(maxCount && count > maxCount) {
                input.val(maxCount);
                count = maxCount;
            }

            config['count'] = count || null;

            updateSelection(id, count + ' ' +text);
            toggleSection(id, false);

            calculatePrice();
        }

        function calculatePrice() {
            UrlHandler.setParameters(config);
            UrlHandler.replaceHistoryState();
            //fillHistory();
            $.ajax({
                type: 'GET',
                url: "{{route('getTranslationPrice')}}",
                data: {
                    '_token': "{{ csrf_token() }}",
                    'config': JSON.stringify(config),
                    'id': '{{$service->id}}'
                },
                success: function (data) {
                    localStorage.setItem('courseSortOrder', document.location);
                    if (data.price > -1){
                        $('#amtInputName').val(data.price);
                        $("#total-price").text(data.price);
                    }

                    if (data.finalPrice === true) {
                        $('.summary .add-to-bag-btn').removeClass('disabled');
                        $('.summary .from').addClass('force-hidden');
                    } else {
                        $('.summary .add-to-bag-btn').addClass('disabled');
                        $('.summary .from').removeClass('force-hidden');
                    }

                    if (data.originalPrice > data.price) {
                        $('.summary .discounted-price').removeClass('force-hidden');
                        $('#discountedPrice').text(data.originalPrice);
                        $("#total-price").addClass('discounted-red');
                        $('.summary .currency').addClass('discounted-red');
                        $('.summary .from').addClass('discounted-red');
                    } else {
                        $('.summary .discounted-price').addClass('force-hidden');
                        $("#total-price").removeClass('discounted-red');
                        $('.summary .currency').removeClass('discounted-red');
                        $('.summary .from').removeClass('discounted-red');
                    }
                }
            });
        }

        function fillHistory() {
            let loc = location.pathname.split('/');
            let url = location.protocol + '//' + location.hostname;
            for (let i = 1 ; i < 4; i++)
                url += '/' + loc[i];
            for (let o in config) {
                let i = config[o];
                if (i == null)
                    return false;

                url += '/' + i;
            }

            window.history.pushState('', '', url);
        }
    </script>
</div>