@extends('account.base', [
    'scripts' => [
        'fileUtilities',
        'multiLineEllipsis'
    ]
])

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

@section('account_content')

    @include('common.no_cache')

    <div class="ui grid" id="serviceStatus">
        <h2 class="ui dividing header font-title bold">
            {{ __('Translation Status') }}
        </h2>

        <div class="row">
            <div class="col">
                <div class="services-header">
                    <div class="header-item">
                        <div class="image-container">
                            <img src="{{config('locations.systemImage.asset').'serviceStatus-1.png'}}" alt="">
                        </div>

                        <div class="text">
                            <div>
                                {{__('Payment Successful')}}
                            </div>
                        </div>
                    </div>

                    <div class="header-arrow-container">
                        <img src="{{config('locations.systemImage.asset').'arrow-dots.png'}}" alt="">
                        <img src="{{config('locations.systemImage.asset').'arrow-pointer.png'}}" alt="">
                    </div>

                    <div class="header-item">
                        <div class="image-container">
                            <img src="{{config('locations.systemImage.asset').'serviceStatus-7.png'}}" alt="">
                        </div>

                        <div class="text">
                            <div>
                                {{__('上传待翻译材料')}}
                            </div>
                        </div>
                    </div>

                    <div class="header-arrow-container">
                        <img src="{{config('locations.systemImage.asset').'arrow-dots.png'}}" alt="">
                        <img src="{{config('locations.systemImage.asset').'arrow-pointer.png'}}" alt="">
                    </div>

                    <div class="header-item">
                        <div class="image-container">
                            <img src="{{config('locations.systemImage.asset').'serviceStatus-3.png'}}" alt="">
                        </div>

                        <div class="text">
                            <div>
                                {{__('UOFFER GLOBAL为您快速处理翻译材料')}}
                            </div>
                        </div>
                    </div>

                    <div class="header-arrow-container">
                        <img src="{{config('locations.systemImage.asset').'arrow-dots.png'}}" alt="">
                        <img src="{{config('locations.systemImage.asset').'arrow-pointer.png'}}" alt="">
                    </div>

                    <div class="header-item">
                        <div class="image-container">
                            <img src="{{config('locations.systemImage.asset').'serviceStatus-8.png'}}" alt="">
                        </div>

                        <div class="text">
                            <div>
                               {{__('获取翻译件')}}
                            </div>
                        </div>
                    </div>

                    <div class="header-arrow-container">
                        <img src="{{config('locations.systemImage.asset').'arrow-dots.png'}}" alt="">
                        <img src="{{config('locations.systemImage.asset').'arrow-pointer.png'}}" alt="">
                    </div>

                    <div class="header-item">
                        <div class="image-container">
                            <img src="{{config('locations.systemImage.asset').'serviceStatus-6.png'}}" alt="">
                        </div>

                        <div class="text">
                            <div>
                                {{__('Service completed')}}
                            </div>
                        </div>
                    </div>
                </div>

                {{--@if(count($translations) == 0)--}}
                    <div class="hint font-title bold">
                        *{{__('TranslationStatusTop')}}
                    </div>
                {{--@endif--}}

                <div class="services-count">
                    <div class="text">
                        @if(!empty($translationResultsCount))
                            {!! __('translations-status', [
                                'orders' => $translationResultsCount,
                                'files' => $completedTranslations
                            ]) !!}
                        @else
                            {{__('No translation results yet')}}
                        @endif
                    </div>

                    <a href="{{ route('account-consultant') }}" class="contact">
                        <img src="{{config('locations.systemImage.asset').'application-contact.png'}}" alt="">

                        <div class="text">
                            {!! __('Contact application consultant') !!} >
                        </div>
                    </a>
                </div>

                <div class="ui grid services-container">
                    @foreach($translations as $key => $translationDetail)
                        @include('translation::layouts.components.status.translation_item')
                    @endforeach
                </div>

                @if(count($recommendedItems))
                    <div class="bottom-images-container">
                        <div class="title">
                            {{__('You may be interested in')}}
                        </div>

                        @include('components.recommendedItems')
                    </div>
                @endif
            </div>
        </div>
    </div>

    @include('file_upload.file_upload_modal', [
        'showWarning' => true,
        'uploadMultimedia' => true,
        'uploadRoute' => 'translationFileUpload',
        'confirmRoute' => 'translationConfirmUpload',
    ])

    <div class="ui tiny modal hide" id="downloadModal">
        <div class="content center">
            {{ __('Preparing your downloading, please wait. This may take a few minutes.') }}
        </div>
    </div>

    <script>
        var groups = document.getElementsByClassName('row-group');
        var firstRun = true;

        function checkHeight() {
            for (var i = 0; i < groups.length; i++) {
                var row = groups[i].getElementsByClassName('service-item-hidden')[0];
                var value = '-'+row.offsetHeight+'px';

                row.style.top = value;
                groups[i].style.marginBottom = value;

                if (firstRun === true && !groups[i].classList.contains('force-open')) {
                    groups[i].classList.remove('open');
                }
            }

            firstRun = false;
        }

        window.addEventListener('resize', checkHeight, false);

        function position(element) {
            return element.getBoundingClientRect();
        }

        checkHeight();
    </script>

    <script>
        $(function () {
            $('#translationStatusMenuItem').addClass('active');
            $('.ui.breadcrumb').append("<a href=\"#\" class=\"section\">" + "{{ __('My Application') }}" + "</a><i class=\"right angle icon divider\"></i><a href=\"#\" class=\"section\">" + "{{ __('Translation Status') }}" + "</a>");

            $('.services-container .service-item').on('click', function () {
                $('.button', this).toggleClass('active')
                    .parents('.row-group')
                    .toggleClass('open');
            });
        });

        function reloadPageWithParam(data) {
            window.location.href = '{{route('translationStatus')}}?fileAdded=1&collapseMenuID='+data;
        }

        function preview(id, element){
            preparePreview(id, $('html'), "{{route('preparePreview')}}", "{{route('displayPreview')}}", "{{route('deletePreview')}}", 'translation', element);
        }

        function downloadAllFiles(urlToSend) {
            var req = new XMLHttpRequest();
            req.addEventListener("load", function(){$('#downloadModal').modal('hide');});
            req.open("GET", urlToSend, true);
            req.responseType = "blob";
            $('#downloadModal').modal({closable: false}).modal('show');
            req.onload = function (event) {
                var blob = req.response;
                var fileName = "download.zip";
                var link=document.createElement('a');
                link.href=window.URL.createObjectURL(blob);
                link.download=fileName;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            };

            req.send();
        }
    </script>
@endsection