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

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

@section('account_content')

    @include('common.no_cache')

    <img src="{{config('locations.systemImage.asset').'movedownload.gif'}}" style="display: none;">

    <div class="ui grid" id="serviceStatus">
        <h2 class="ui dividing header font-title bold">
            {{ __('Application 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'}}">
                        </div>

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

                                <a href="{{ route('account-consultant') }}">
                                    <span>
                                        {{$consultantName ?? 'Consultant'}}
                                    </span>

                                    <img src="{{config('locations.systemImage.asset').'application-chat.png'}}">
                                </a>
                            </div>
                        </div>
                    </div>

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

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

                        <div class="text">
                            <div>
                                {{__('Fill in the')}}

                                <a href="{{route('application-form-show')}}">
                                    {{__('application form')}}
                                </a>


                                {{__('and upload the')}}

                                <a href="{{route('clientDocument',['type'=>'userDocuments'])}}">
                                    {{__('application documents')}}
                                </a>
                            </div>
                        </div>
                    </div>

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

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

                        <div class="text">
                            <div>
                                {{__('UKUOFFER will process your application')}}
                            </div>
                        </div>
                    </div>

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

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

                        <div class="text">
                            <div>
                                {{__('Check the application results')}}
                            </div>
                        </div>
                    </div>

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

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

                        <div class="text">
                            <div>
                                {{__('Confirm your preferred university')}}
                            </div>
                        </div>
                    </div>

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

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

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

                <div class="hint font-title bold">
                    @if(count($applications) > 0)
                        {{__('ApplicationStatusTop')}}
                    @else
                        {!!__('ApplicationStatusTopEmpty', [
                            'link' => '<a href="'.route('courses_catalog').'">'.__('course list page').'</a>'
                        ])!!}
                    @endif
                </div>

                <div class="services-count">
                    <div class="text font-title">
                        @if(isset($resultsCount) && $resultsCount > 0)
                            {{__('Your')}}

                            <span class="color">
                                {{$resultsCount}}
                            </span>

                            {{($resultsCount > 1) ? __('applications have') : __('application has')}}{{__('produced results')}}
                        @else
                            {{__('No application 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>

                {{--TODO: check if hint has to be displayed--}}
                @if(true)
                    <div class="hint">
                        <div class="hint-title">
                            {{__('Warm Reminder')}}
                        </div>

                        <div class="hint-text">
                            <div class="line relativeContainer">
                                <div class="dot"></div>

                                <div class="text">
                                <span class="color">
                                    {{__('Offer Deadline')}}:
                                </span>
                                    {{__('OfferDeadlineText')}}
                                </div>
                            </div>

                            <div class="line relativeContainer">
                                <div class="dot"></div>

                                <div class="text">
                                <span class="color">
                                    {{__('Offer Deposit Deadline')}}:
                                </span>
                                    {{__('OfferDepositDeadlineText')}}
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="ui grid services-container">
                    @php
                        $date = date("Y-m-d");
                        $list = ['Overall', 'Listening', 'Speaking', 'Reading', 'Writing'];
                    @endphp

                    @foreach($applications as $applicationDetails)
                        @include('account.application.application_row')
                    @endforeach
                </div>

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

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

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

    <script>
        var ellipsis = new MultiLineEllipsis(true);
        var groups = document.getElementsByClassName('row-group');
        var rows = [];

        function checkHeight(firstRun) {
            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) {
                    rows.push(row);
                    drawProgress(row);
                    groups[i].classList.remove('open');
                }
            }
        }

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

        function refreshStatusView() {
            checkHeight();
            trimText();
            refreshProgress();
        }

        function trimText () {
            ellipsis.clipText('.course-change.en .course-name-container', '.course-name-text');
        }

        function refreshProgress () {
            rows.forEach(function (item) {
               drawProgress(item);
            });
        }

        function drawProgress(row) {
            try {
                var nextStage = row.querySelectorAll('.next-stage .dot');
                var lastStagePosition = position(((nextStage.length)?nextStage:row.querySelectorAll('.application-stage:last-child .dot'))[0]);

                row.getElementsByClassName('progress')[0].style.height = (lastStagePosition.top - position(row).top + 1) + 'px';
            } catch (e) {

            }
        }

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

        checkHeight(true);
        trimText();
    </script>

    <script>
        $(".downloadimg_size").hide();
    	function Process(toDownload,fileDownloaded,missFileCount,data){

       // console.log(data);
            setTimeout(funcName,1000);
            function funcName() {
                $(data).show();
                $(data).next("img").hide();
                $('#downloadModal').modal('hide');
            }
        //console.log('OnFinish：');
        //console.log(toDownload,fileDownloaded,missFileCount);
    }

        function Result(toDownload,fileDownloaded,missFileCount){
            console.log('onDownloaded：');
            console.log(toDownload,fileDownloaded,missFileCount);
        }

        var fileList=[];

        @foreach($applications as $application)
            @foreach($application->statuses as $status)
                @if(isset($status->hasDocument))
                    var statusFileList = [];

                    @for($i = 0; $i < count($status->documents); $i++)
                        statusFileList['{{$i}}'] = ['{{config('locations.customerDocument.asset')}}{{$status->documents[$i]->filePath}}?t={{$status->documents[$i]->created_at}}','{{$status->documents[$i]->name}}.{{$status->documents[$i]->format}}'];
                    @endfor

                    fileList['{{$status->statusId}}'] = statusFileList;
                @endif
            @endforeach
        @endforeach

        function downloadfile(id,Newthis){
        	$('#downloadModal').modal('show');
        	$(Newthis).hide();
            $(Newthis).next("img").show();
            var documentDownloader = new $.DocumentDownloader();
            documentDownloader.onFinish="Process";
            documentDownloader.onDownloaded="Result";
            documentDownloader.batchDownloadToZip(fileList[id], Newthis);
        }

        $(function(){
            $('#downloadModal').modal({closable: false});
            $('#applicationStatusMenuItem').addClass('active');
            $('.ui.breadcrumb').append("<a href=\"#\" class=\"section\">"+"{{ __('My Application') }}"+"</a><i class=\"right angle icon divider\"></i><a href=\"#\" class=\"section\">"+"{{ __('Application Status') }}"+"</a>");

            $('.services-container .service-item').on('click', function(e){
                if ($(e.target).parent().hasClass('download-button')) return false;

                $('.button', this).toggleClass('active')
                    .parents('.row-group').toggleClass('open');
            }).on('click', '.payment-button', function (e) {
                e.stopImmediatePropagation();
            });
        });
    </script>
@endsection