@php
    use App\Enumerables\Degree;

    $version = config('app.version');    
    
    $gpaConfigStr = json_encode($gpaConfig ?? '');
@endphp
@extends('account.base', [
    'scripts' => [
        'laydate'
    ],
    'styles' => [
        'laydate'
    ]
])

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

@section('account_content')
    @include('common.no_cache')
    <div class="hidden" id="preloader"></div>
    <div class="ui grid" id="externalApplicationForm">
        <div class="ui header font-title">
            <h2>{{ __('Application Form') }}</h2>
            <p class="prompt-title font-title bold">
                {{__('application-form-note')}}
            </p>
        </div>
        <div class="application-progress">
            <div class="application-progress-bar">
                <span class="progress-bar"></span>
            </div>
            <div class="item-progress font-title bold curClass" data-id="0">
                1
                <p class="item-progress-text">
                    {{__('application-form-stage-1')}}
                </p>
            </div>
            <div class="item-progress font-title bold" data-id="1">
                2
                <p class="item-progress-text">
                    {{__('application-form-stage-2')}}
                </p>
            </div>
            <div class="item-progress font-title bold" data-id="2">
                3
                <p class="item-progress-text">
                    {!! __('application-form-stage-3') !!}
                </p>
            </div>
            <div class="item-progress font-title bold" data-id="3">
                4
                <p class="item-progress-text">
                    {!! __('application-form-stage-4') !!}
                </p>
            </div>
        </div>

        <script>
            function setSelected(id, value) {
                @if(isset($applicationForm))
                    setTimeout(function () {
                        $(id).dropdown('set selected', value);
                    }, 200);
                @endif
            }

            function markAsLoaded(id) {
                $(id).addClass('loaded');
            }
        </script>
        
        @include('account.application_form.application_form_1')
        @include('account.application_form.application_form_3')
        @include('account.application_form.application_form_2')
        @include('account.application_form.application_form_4')
    </div>

    @include('account.application_form.application_form_template')

    @include('common.modals.contents.notification_modal', [
        'id' => 'passportNoError',
        'showCloseButton' => true,
        'text' => __('Passport number already exists'),
        'callbacks' => [
            [
                'callback' => 'clearPassportInput(this)',
                'buttonStyle' => 'light',
                'buttonText' => __('Got it')
            ]
        ]
    ])

    @include('common.modals.contents.success_modal', [
        'id' => 'formSaveConfirmation',
        'text' => __('Changes saved successfully.')
    ])

    @include('common.modals.contents.notification_modal', [
        'id' => 'formSubmit',
        'text' => __('You cannot edit your personal information once it has been submitted'),
        'callbacks' => [
            [
                'callback' => '$(this).parents(\'.custom-modal\').modal(\'hide\');',
                'buttonStyle' => 'dark',
                'buttonText' => __('Not now-submit')
            ],
            [
                'callback' => 'triggerFormSubmission()',
                'buttonStyle' => 'light',
                'buttonText' => __('Submit')
            ]
        ]
    ])

    @include('common.modals.contents.notification_modal', [
        'id' => 'formSubmitConfirmation',
        'text' => __('Your application form has been submitted, please upload your relevant application documents'),
        'callbacks' => [
            [
                'callback' => 'location.reload();',
                'buttonStyle' => 'dark',
                'buttonText' => __('Cancel')
            ],
            [
                'callback' => 'location.href=\''.route('clientDocument').'\'',
                'buttonStyle' => 'light',
                'buttonText' => __('Upload Now')
            ]
        ]
    ])

    @include('common.modals.contents.notification_modal', [
        'id' => 'cancelCardEditor',
        'text' => __('The content is not saved, do you want to discard editing?'),
        'callbacks' => [
            [
                'callback' => 'cancelCard();',
                'buttonStyle' => 'dark',
                'buttonText' => __('Discard editing')
            ],
            [
                'callback' => 'closeCanceCardlConfirmation()',
                'buttonStyle' => 'light',
                'buttonText' => __('Continue editing')
            ]
        ]
    ])

    @include('common.modals.contents.notification_modal', [
        'id' => 'removeCardConfirmation',
        'text' => '确认删除此条信息？',
        'callbacks' => [
            [
                'callback' => 'closeRemoveCardlConfirmation()',
                'buttonStyle' => 'dark',
                'buttonText' => __('Cancel')
            ],
            [
                'callback' => 'removeCardConfirmCallback()',
                'buttonStyle' => 'light',
                'buttonText' => __('Confirm')
            ]
        ]
    ])

    @include('common.modals.contents.success_modal', [
        'id' => 'eduAlertModal',
        'text' => '至少完善一条教育经历'
    ])

    <script src="{{asset('js/jquery.form.js')}}?{{config('app.version')}}"></script>
    <script>
        var today = new Date().toISOString().split('T')[0];
        var d = new Date();
        var year = d.getFullYear();
        var month = d.getMonth();
        var day = d.getDate();
        var dob_limit = new Date(year, month, day);
        var errors = null;
        var ukAddressStar;
        var eduItemIndex = 0;
        var workItemIndex = 0;
        var refItemIndex = 0;
        var awardItemIndex = 0;
        var eduItemMax = 4;
        var eduItemMin = 0;
        var workItemMax = 5;
        var workItemMin = 0;
        var refItemMax = 5;
        var refItemMin = 0;
        var awardItemMax = 5;
        var awardItemMin = 0;

        var englishProficiencyData = ['IELTS', 'TOEFL', 'PTE'];
        let _gpaConfig =  {!!$gpaConfigStr!!};

        let allowEdit = JSON.parse('{{($allowEdit) ? 'true' : 'false'}}');
        let inCardEditMode = false;
        let step = 0;
        let itemProgress = document.querySelectorAll(".item-progress"),
            fromContents = document.querySelectorAll(".from-content"),
            progressBar = document.querySelector('.progress-bar');

        var submitUrl = "{{isset($token) ? route('saveApplicationFormWithToken') : route('authApplicationForm')}}";
        
        @if(isset($applicationForm->educationalBackground))
            var educationalBackground = {!!($applicationForm->educationalBackground)!!};
        @else
            var educationalBackground = [];
        @endif
        
        @if(isset($applicationForm->workingExperience))
            var workingExperience = {!!$applicationForm->workingExperience!!};            
        @else
            var workingExperience = [];
        @endif
        
        @if(isset($applicationForm->referenceInformation))
            var referenceInformation = {!!$applicationForm->referenceInformation!!};
        @else
            var referenceInformation = [];
        @endif
        
        @if(isset($applicationForm->awardWinningExperience))
            var awardWinningExperience = {!!$applicationForm->awardWinningExperience!!};
        @else
            var awardWinningExperience = [];
        @endif        
        //form fields initializer

        $(function () {
            ukAddressStar = $('#ukAddressStar');
            workingExperience= qsort(workingExperience);
            educationalBackground= qsort(educationalBackground);
            $('body').on('click', '.field-dropdown-container', function (event) {
                let eventSource = event.originalEvent || event;

                if (eventSource.target.classList.contains('field')) {
                    event.preventDefault();
                    event.stopImmediatePropagation();

                    let dropdown = $(this).find('.ui.dropdown');

                    if (dropdown.length > 0) {
                        dropdown.dropdown('show');
                    }
                } else if (eventSource.target.classList.contains('icon')) {
                    event.preventDefault();
                    event.stopImmediatePropagation();

                    let dropdown;

                    let element = $(eventSource.target);

                    if (element.parents('.dropdown').length === 1) {
                        dropdown = element.parents('.dropdown');
                    } else if (element.parents('.field').find('.dropdown').length === 1) {
                        dropdown = element.parents('.field').find('.dropdown');
                    } else {
                        dropdown = $(this).find('dropdown');
                    }

                    if (dropdown && dropdown.length > 0) {
                        dropdown.dropdown('show');
                    }
                }
            }).on('click', '.field-calendar-container', function (event) {
                event = event.originalEvent || event;

                if (event.target.classList.contains('field') || event.target.classList.contains('icon')) {
                    event.preventDefault();
                    event.stopImmediatePropagation();

                    $(this).find('input').trigger('click');
                }
            });

            $('#applicationLevel').on('change', function () {
                if (this.value) {
                    toggleDetailedApplicationLevel(
                        this.value === '{{\App\Enumerables\ApplicationDegreeLevels::UNDERGRADUATE}}',
                        this.value === '{{\App\Enumerables\ApplicationDegreeLevels::POSTGRADUATE}}'
                    )
                }
            });

            @if(isset($applicationForm->application_degree_level) && isset($applicationForm->detailed_application_degree_level))
                $('#applicationLevel')
                    .parents('.dropdown')
                    .dropdown('set selected', '{{$applicationForm->application_degree_level}}');

                @if($applicationForm->application_degree_level == \App\Enumerables\ApplicationDegreeLevels::UNDERGRADUATE)
                    $('#detailedApplicationLevelUndergraduate')
                        .parents('.dropdown')
                        .dropdown('set selected', '{{$applicationForm->detailed_application_degree_level}}');
                @elseif($applicationForm->application_degree_level == \App\Enumerables\ApplicationDegreeLevels::POSTGRADUATE)
                    $('#detailedApplicationLevelPostgraduate')
                        .parents('.dropdown')
                        .dropdown('set selected', '{{$applicationForm->detailed_application_degree_level}}');
                @endif

                toggleDetailedApplicationLevel(
                    {{($applicationForm->application_degree_level == \App\Enumerables\ApplicationDegreeLevels::UNDERGRADUATE) ? 'true' : 'false'}},
                    {{($applicationForm->application_degree_level == \App\Enumerables\ApplicationDegreeLevels::POSTGRADUATE) ? 'true' : 'false'}}
                );
            @endif

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

            @if(isset($applicationForm))
               /*  $('#PersonTitle').parents('.dropdown').dropdown('set selected', '{{$applicationForm->title}}'); */
                /* $('#ethnicOrigin').parents('.dropdown').dropdown('set selected', '{{$applicationForm->title}}'); */
                $('input[name="gender"][value="{{$applicationForm->gender}}"]').prop('checked', true);
                $('input[name="currentlyInUK"][value="{{$applicationForm->currentlyInUK}}"]').prop('checked', true);
                $('input[name="currentlyInUkStudy"][value="{{$applicationForm->currentlyInUkStudy}}"]').prop('checked', true);
                $('input[name="criminalConviction"][value="{{$applicationForm->criminalConviction??0}}"]').prop('checked', true);
                //process englishProficiency
                var englishProficiency="{{$applicationForm->englishProficiency}}";
                checkEnglishProficiencySelection(englishProficiency,0);      
                $('input[name="background"][value="{{$applicationForm->student_location}}"]').prop('checked', true);
                // $('input[name="visaUKRejected"][value="{{$applicationForm->visaUKRejected}}"]').prop('checked', true);
                $('input[name="IELTSStatus"][value="{{$applicationForm->IELTSStatus}}"]').prop('checked', true);
                // $('.search.selection.dropdown.universityUK').dropdown('set selected', '{{$applicationForm->currentUni ?? ''}}');
                // $('.search.selection.dropdown.universityChinese').dropdown('set selected', '{{$applicationForm->currentUniChinese ?? ''}}');
                // $('#channelDiv').dropdown('set selected', '{{$applicationForm->knowAboutUs ?? ''}}');
            @endif
            //initial EduItems
                  
            for (let i = 0, j = workingExperience.length; i < j; i++) {
                addWorkItem(workingExperience[i]);
            }
            
            for (let i = 0, j = referenceInformation.length; i < j; i++) {
                addRefItem(referenceInformation[i]);
            }

            setEduBlock();
            setAwardBlock();
    
            if (!allowEdit) {
                $(".addEduItem").hide();
                $(".item-cart-option-button").hide();
            } else {
                initSetInputCheck();
            }
        });

        function toggleDetailedApplicationLevel(isUndergraduate, isPostgraduate) {
            $('.application-type[data-type="undergraduate"]')
                .toggleClass('hidden', !isUndergraduate)
                .find('input')
                .prop('required', isUndergraduate);

            $('.application-type[data-type="postgraduate"]')
                .toggleClass('hidden', !isPostgraduate)
                .find('input')
                .prop('required', isPostgraduate);

            $('#detailedApplicationLevelLabel').toggleClass(
                'hidden',
                !!(
                    !isUndergraduate && !isPostgraduate
                )
            );
        }

        //General Settings
        $(function () {
            $("body").on('change','input[name="passport_obtained"]', function () {
                checkPpassportObtainedOptions();
            });
            
            checkPpassportObtainedOptions()
            function checkPpassportObtainedOptions(){
                
                var value=$("input[name='passport_obtained']:checked").val();
                if(value == "1") {
                    $(".isHasPassportObtained").find("input").each(function(){
                        $(this).attr("required", true);
                    })
                    $(".isHasPassportObtained").show()
                }else {
                    $(".isHasPassportObtained").find("input").each(function(){
                        $(this).val("")
                        $(this).removeAttr("required");
                    })
                    $(".isHasPassportObtained").hide()
                }
            }
            $('.search.selection.dropdown').dropdown({
                on: 'click',
                allowAdditions: true
            });

            let _dateOfExpiry = new Date( year+10, 12);
            let _experienceEndDate = new Date().getFullYear() + 5;
            let _workingEndDate = new Date().getFullYear() + 1;

            initCalendar(".timeOfIssueVal", dob_limit);
            initCalendar(".dateOfExpiryVal", _dateOfExpiry);
            initCalendar('#birthday-date', dob_limit, new Date((new Date().getFullYear() - 60).toString()));
            initCalendar("#ielts-date", today);
            initCalendar([
                '#first_date_uk_block',
                '.common_date_input_block'
            ]);
            
            $('#first-name').on('focus', function () {
                $('.nameNote').addClass('visible');
            });

            $('i.dropdown.icon').removeClass("dropdown").addClass("chevron down");
            $('i.chevron.down.icon').click(function () {
                $(this).parent('.dropdown').dropdown('toggle');
            });

            $('input[name="background"]').on('change', function () {
                if($(this).val() === 'inUK') {
                    ukAddressStar.removeClass('hidden-star');
                } else {
                    ukAddressStar.addClass('hidden-star');
                }
            });
    
            $('input[name="currentlyInUK"]').on('change', function () {//是否在英国
                let _val = $(this).val(),
                    _currentlyInUkStudy = $("input[name='currentlyInUkStudy']:checked").val();
                
                if (_val == 0 && _currentlyInUkStudy == 0) {
                    isShowUkAddress(false)
                } else {
                    isShowUkAddress(true)
                }
            });
            
            $('input[name="currentlyInUkStudy"]').on('change', function(){//是否在英国学习
                let _val = $(this).val(),
                    _currentlyInUK = $("input[name='currentlyInUK']:checked").val();
                if(_val == 0 && _currentlyInUK == 0){
                    isShowUkAddress(false)
                }else{
                    isShowUkAddress(true)
                }
            });
    
            function isShowUkAddress(status) {//显示或隐藏
                let element = $(".UKAddressWrapper");

                if (status) {
                    element.show()
                        .find('input')
                        .attr("required", true);
                } else {
                    element.hide()
                        .find('input')
                        .removeAttr("required");

                    element.find('.errorMessage').remove();
                    element.find('.errorBorder').removeClass('errorBorder');
                }
            }

            function initUkAddressStatus(){//初始化获取
                let _currentlyInUkStudy = $("input[name='currentlyInUkStudy']:checked").val(),
                    _currentlyInUK = $("input[name='currentlyInUK']:checked").val();
                
                if(_currentlyInUkStudy == 0 && _currentlyInUK ==0){
                    isShowUkAddress(false)
                }else{
                    isShowUkAddress(true)
                }
            }
            
            initUkAddressStatus();

            $("#province").on('change', function () {
                var id = $(this).val();
                var text = $(this).siblings('.text').text();

                $(this).val(id);

                if (id !== '') {
                    $.ajax({
                        type:'GET',
                        url:"{{route( 'getProvinceCity')}}",
                        data:{
                            '_token': "{{ csrf_token() }}",
                            'provinceID': id
                        },
                        success: function (data) {
                            $('#citySelection').dropdown('clear').find('.menu').empty();
                            for (var i = 0; i < data.length; i++) {
                                var id = data[i]['id'];
                                var name = data[i]['cityNameChinese'];
                                $('#citySelection .menu').append('<div class=\"item\" data-value="'+id+'">'+name+'</div>');
                            }
                        }
                    });
                }
            });

            $('#formSubmitConfirmation').modal({
                transition: 'fade',
                closable: false
            });

            var courseInputText = '{{__('N/A')}}';
            $('#universityChinese').on('change', function(){
                if($(this).val() == 'none') {
                    $('#subjectChina').val(courseInputText);
                }
            });
            $('#university').on('change', function(){
                if($(this).val() == 'none') {
                    $('#subjectUK').val(courseInputText);
                }
            });
            $("input[name='englishProficiency']").on('change', function(){
                checkEnglishProficiencySelection($(this).val(),1);
            });
        });

        function checkEnglishProficiencySelection(value, type) {
            $('input[name="englishProficiency"][value="' + value + '"]').prop('checked', true);

            if (type == 1) {
                $(".engDetailRow").find("input[type='text']").each(function () {
                    this.value = '';
                    removeInputErrMsg(this);
                });

                $(".Score-wrapper").find("input[data-score='true']").each(function () {
                    $(this).val("")
                    $(this).parents("div.field").removeClass("errorBorder")
                });
            }

            if (value === 'IELTS') {
                $("input[name='englishProficiencyText']").val("");
                $("#englishProficiencyText").hide();
                $("#englishProficiencyOther").val("")
                $(".Score-wrapper").find("input[data-score='true']").each(function () {
                    $(this).attr('data-limit', '9.0')

                    $(this).addClass("inputValidation")
                    $(this).attr("required", "")
                    $(this).parents("div.field").removeClass("errorBorder")
                });
                $(".engDetailRowStar").show()
                $(".engDetailRowStar").removeClass("hidden-star")
                $(".engDetailRow").show();
                $(".engDetailLinkRow").hide();
            } else if (value == 'TOEFL') {
                $("#englishProficiencyOther").val("")
                $("input[name='englishProficiencyText']").val("");
                $("#englishProficiencyText").hide();
                $(".Score-wrapper").find("input[data-score='true']").each(function () {
                    let _name = $(this).attr('name');
                    if (_name == 'IELTSResult') {
                        $(this).attr('data-limit', '120')
                    } else {
                        $(this).attr('data-limit', '30')
                    }

                    $(this).addClass("inputValidation")
                    $(this).attr("required", "")
                });
                $(".engDetailRowStar").show()
                $(".engDetailRowStar").removeClass("hidden-star")
                $(".engDetailRow").show();
                $(".engDetailLinkRow").hide();
            } else if (value == 'PTE') {
                $("#englishProficiencyOther").val("")
                $("input[name='englishProficiencyText']").val("");
                $("#englishProficiencyText").hide();
                $(".Score-wrapper").find("input[data-score='true']").each(function () {
                    $(this).attr('data-limit', '90')

                    $(this).addClass("inputValidation")
                    $(this).attr("required", "")
                });
                $(".engDetailRowStar").show()
                $(".engDetailRowStar").removeClass("hidden-star")
                $(".engDetailRow").show();
                $(".engDetailLinkRow").hide();

            } else if (value == 'None') {
                $(".engDetailLinkRow").show();
                $("#englishProficiencyOther").val("")
                $(".Score-wrapper").find("input[data-score='true']").each(function () {
                    $(this).attr('data-limit', "")

                    $(this).removeClass("inputValidation")
                    $(this).removeAttr("required", "")
                });
                $(".engDetailRow").hide();
                $(".engDetailRowStar").hide()
                $(".engDetailRowStar").addClass("hidden-star")


                $("input[name='englishProficiencyText']").val("");
                $("#englishProficiencyText").hide();
            } else {

                $("#englishProficiencyOther").val(value)
                $("#englishProficiencyOther").prop('checked', true)
                $("#englishProficiencyText").show();
                $(".engDetailRow").show();
                if (englishProficiencyData.includes(value)) {
                    $(".engDetailLinkRow").hide();
                } else {
                    $(".engDetailLinkRow").show();
                }

                $(".Score-wrapper").find("input[data-score='true']").each(function () {
                    $(this).attr('data-limit', "")

                    $(this).removeClass("inputValidation")
                    $(this).removeAttr("required", "")
                });
                $(".engDetailRowStar").hide()
                $(".engDetailRowStar").addClass("hidden-star")
            }
        }

        $(".Score-wrapper").on('blur', 'input', function () {
            let _limit = $(this).attr("data-limit"),
                _val = $(this).val().replace(/[^\d\.]/g, ''),
                _type = $("input[name='englishProficiency']:checked").val();
            $(this).val(_val)
            if (_type == 'IELTS' || _type == 'TOEFL' || _type == 'PTE') {
                if (_val !== "") {
                    if (_limit !== '') {
                        if (_limit == '9.0') {
                            let status = isInteger(Number(_val / 0.5));
                            if (_val > 9) {
                                $(this).val(9)
                            } else if (_val < 0) {
                                $(this).val(0)
                            } else {
                                if (!status) {
                                    $(this).val(Math.round(_val))
                                }
                            }
                        } else {
                            if (_val > parseInt(_limit)) {
                                $(this).val(_limit)

                            }
                        }
                        $(this).parents("div.new-field").removeClass('errorBorder')
                    }
                } else {
                    $(this).parents("div.new-field").addClass('errorBorder')
                }
            }
        });

        function isInteger(val) {
            return val % 1 === 0;
        }

        function showPassportModal() {
            $('#passportNoError').modal({
                closable: false,
            }).modal('show');
        }

        function submitConfirm() {
            doValidBeforeSubmit();
        }
        
        let regZh = /[\u4e00-\u9fa5]/;
        let _errorMessage='<span class="errorMessage"></span>';

        function addInputErrMsg(input, msg) {
            let _parent = $(input).parents(".new-field, .new-field-radio");
            _parent.append(_errorMessage);
            if (_parent.is(".new-field"))
                _parent.addClass("errorBorder");
            let _message = _parent.find(".errorMessage");
            _message.text(msg);
        }

        function removeInputErrMsg(input) {
            let _parent = $(input).parents(".new-field,.new-field-radio");
            let _message = _parent.find(".errorMessage");
            _parent.removeClass("errorBorder");
            _message.remove();
        }

        function checkAllInput(element){
            let firstErrorInput;
            let itemQueryString=".inputValidation";

            if (element) {
                var items = element.find(itemQueryString);
            } else {
                var items = $(itemQueryString);
            }

            items.each(function () {
                if(!checkInput(this)){
                    if(!firstErrorInput){
                        firstErrorInput=this;
                    }
                }
            });           
            return firstErrorInput;
        }

        function checkInput(input) {
            let _this = $(input);
            let _lang = _this.attr("data-lang"),
                _val = _this.val(),
                _parent = _this.parents(".new-field");
            _score = _this.attr("data-score");

            if (input.type === 'radio' || input.type === 'checkbox') {
                if (input.required) {
                    if ($("input[name='" + input.name + "']:checked").length === 0) {
                        if (eval(_score)) {
                            addInputErrMsg(input, "");
                        } else {
                            addInputErrMsg(input, "请输入内容");
                        }

                        return false;
                    }
                }
            } else {
                if (input.classList.contains('date-no-validate')) {
                    return true;
                }

                if (input.required || input.classList.contains('search-required')) {
                    if (_val == "") {
                        if (eval(_score)) {
                            addInputErrMsg(input, "");
                        } else {
                            addInputErrMsg(input, "请输入内容");
                        }

                        return false;
                    }
                }
                if (_lang !== 'zh') {
                    if (regZh.test(_val)) {
                        if (eval(_score)) {
                            addInputErrMsg(input, "");
                        } else {
                            addInputErrMsg(input, "请使用英文及数字填写");
                        }
                        return false;
                    }
                }
            }
            removeInputErrMsg(input);
            return true;
        }

        function setInputCheck(input) {
            if (input.type === "hidden") {
                $(input).on("change", function () {
                    let dropdown = $(this).parents('.dropdown');

                    if (dropdown.length > 0 ) {
                        let value = this.value;

                        if (
                            dropdown.hasClass('uni-addition')
                            && value
                            && dropdown.dropdown('get item', dropdown.dropdown('get value')).hasClass('addition')
                        ) {
                            dropdown.find('.user-item').remove();
                            dropdown.find('.menu .item:first-child').after('<div class="item user-item" data-value="' + value + '">' + value + '</div>');
                            dropdown.dropdown('refresh');
                            dropdown.dropdown('set selected', value);
                        }
                    }

                    if (checkInput(input)) {
                        removeInputErrMsg(input);
                    }
                });
            } else if (input.type === "radio") {
                $(input).on("change", function () {
                    removeInputErrMsg(input);
                });
            } else {
                $(input).on("blur", function () {
                    checkInput(input);
                }).on("focus", function () {
                    removeInputErrMsg(input);
                });
            }
        }

        function initSetInputCheck(element) {
            let itemQueryString = ".inputValidation";
            if (element) {
                items = element.find(itemQueryString);
            } else {
                items = $(itemQueryString);
            }
            items.each(function () {
                setInputCheck(this);
            });
        }

        function saveFormStep1(nextStep) {
            if (!allowEdit) {
                initShowStep(nextStep);
                return false;
            }

            let errorInput = checkAllInput($("#applicationFormStep1"));
            if (!errorInput) {
                doSubmit(
                    $('#applicationFormStep1').serialize(),
                    nextStep,
                    'get'
                );
            } else {
                scrollToElement(
                    $(errorInput).parents(".new-field, .new-field-radio")
                );
            }
        }

        function saveFormStep2(nextStep) {
            if (!allowEdit) {
                initShowStep(nextStep);
                return false;
            }
            let errorInput = checkAllInput($("#applicationFormStep2"));
            if (!errorInput) {
                var submitData = {};
                $('#applicationFormStep2').find("input[type='text'],input:checked").each(function () {
                    submitData[this.name] = this.value;
                });
                if ($("input[name='englishProficiency']:checked").val() == "") {
                    submitData["englishProficiency"] = $("input[name='englishProficiencyText']").val();
                }
                awardData = [];
                for (i in awardWinningExperience) {
                    awardData.push(awardWinningExperience[i]);
                }
                awardDataJSON = JSON.stringify(awardData);
                submitData["awardWinningExperience"] = awardDataJSON;
                doSubmit(submitData, nextStep, 'post');
            } else {
                scrollToElement($(errorInput).parents(".new-field,.new-field-radio"));
            }
        }

        function saveFormStep3(nextStep){
            if(!allowEdit){
                initShowStep(nextStep);
                return false;
            }
            var eduDataCount=0;
            for(i in educationalBackground){
                eduDataCount += 1;
            }
            if (eduDataCount > 0) {
                let eduData = [];
                for (let i in educationalBackground) {
                    eduData.push(educationalBackground[i]);
                }
                doSubmit(
                    {
                        "educationalBackground":
                            JSON.stringify(eduData)
                    },
                    nextStep,
                    'post'
                );
            } else {
                $("#eduAlertModal").modal("show");
            }
            
        }
       
        function saveFormStep4(nextStep,isSubmit){
            if(!allowEdit){
                initShowStep(nextStep);
                return false;
            }
            var submitData={};
            //Work Data
            workData=new Array();
            for(i in workingExperience){
                workData.push(workingExperience[i]);
            }           
            workDataJSON=JSON.stringify(workData);
            submitData.workingExperience=workDataJSON;
            //ref Data
            refData=new Array();
            for(i in referenceInformation){
                refData.push(referenceInformation[i]);
            }
            refDataJSON=JSON.stringify(refData);
            submitData.referenceInformation=refDataJSON;
            doSubmit(submitData,nextStep,'post',isSubmit);       
            
        }
        
        function doValidBeforeSubmit() {
            $('#formSubmit').modal('show');
        }
 
        function saveCardToServer(key,data){ 
            submitData={};
            newData=[];
            for (i in data) {
                newData.push(data[i]);
            }
            submitData[key]=JSON.stringify(newData);    
            console.log(submitData) ;
            $("#preloader").removeClass("hidden");
            $.ajax({
                method: 'POST',
                data: submitData,
                url: submitUrl,
                success: function (result) {
                    $("#preloader").addClass("hidden");
                },
                error: function (result) {
                    $("#preloader").addClass("hidden");
                },
            });
        }

        function doSubmit(submitData, nextStep, method, isSubmit) {
            if (isSubmit == 1) {
                submitData["submitLable"] = 1;
            }
            $.ajax({
                method: method,
                data: submitData,
                url: submitUrl,
                success: function (data) {
                    if (!allowEdit) {
                        initShowStep(nextStep);
                        return;
                    }
            
                    if (data == '1') {
                        if (isSubmit == 1) {
                            $('#formSubmitConfirmation').modal('show');
                        } else {
                            showSaveConfirmation();
                            initShowStep(nextStep);
                        }
                    }
                }
            });
        }
        
        function saveForm(nextStep) {
            var form = $('#externalApplicationForm form');
            var url = form.attr('action');
            $.ajax({
                method: 'get',
                data: form.serialize(),
                url: url,
                success: function (data) {
                    if (data == '1') {
                        showSaveConfirmation();
                        initShowStep(nextStep);
                    }
                }
            });
        }

        function showSaveConfirmation() {
            $('#formSaveConfirmation').modal('show');

            setTimeout(function () {
                $('#formSaveConfirmation').modal('hide');
            }, 3000);
        }

        function triggerFormSubmission() {
            saveFormStep4(0,1);
            $('#submissionType').val(1);
        }

        function clearPassportInput(element) {
            $('#passport-number').val('');
            $(element).parents('.modal').modal('hide');
        }
        
        Array.prototype.forEach.call(itemProgress, item => {
            item.onclick = function () {
                let _class = item.getAttribute('class').split(" ");
                    if (_class.indexOf("curClass") !== -1) {
                        initShowStep(this.dataset.id);
                    }
            }
        });
        

        /**
         * initial step
         * @param {string|number} _step
         */
        let initShowStep = _step => {
            if (!inCardEditMode) {
                Array.prototype.forEach.call(fromContents, item => {
                    item.classList.remove("curClass");
                });
        
                fromContents[_step].classList.add("curClass");
        
                Array.prototype.forEach.call(itemProgress, item => {
                    if (!item.classList.contains('fixedCur')) {
                        item.classList.remove("curClass");
              
                        progressBar.style.width = (_step * 33.3) + '%';
                    }
           
                    if (item.dataset.id <= _step) {
                        item.classList.add("curClass");
                    }
                });
                
                if (_step == 1) {
                    if (educationalBackground.length === 0) {
                        addEduItem();
                    }
                }
                
                $("#account-base").get(0).scrollIntoView();
            }
        };
        
        initShowStep(step);

        function setEduBlock() {
            sortData(educationalBackground, ['date']);

            for (let i = 0; i < educationalBackground.length; i++) {
                addEduItem(educationalBackground[i]);
            }
    
            resetUniversityVal()
        }

        function setWorkBlock() {
            
            for (let i = 0; i < workingExperience.length; i++) {
                addWorkItem(workingExperience[i]);
            }
    
        }

        function resetEduBlock() {
            $("#eduBlock").find(".eduItem").remove();
            let data =[];
            for (let i in educationalBackground) {
                data.push(educationalBackground[i]);
            }
            sortData(data,['to','from']);
            educationalBackground=data;
            eduItemIndex=0;
            setEduBlock();
        }

        function setAwardBlock(){
            sortData(awardWinningExperience, ['date']);
            
            for (let i = 0; i < awardWinningExperience.length; i++) {
                addAwardItem(awardWinningExperience[i]);
            }
        }

        function resetAwardBlock() {
            $("#awardBlock").find(".awardItem").remove();
            let data =[];
            for (let i in awardWinningExperience) {
                data.push(awardWinningExperience[i]);
            }
            sortData(data,['date']);
            awardWinningExperience=data;
            awardItemIndex=0;
            setAwardBlock();
        }
        
        function eduChangeCountry(obj) {
            setUniversityList(
                $("#" + 'eduItem_' + obj.getAttribute('data-id')),
                obj.value,
                ''
            );
        }

        function setUniversityList(obj, country, defaultValue) {
            let uniItem = obj.find(".universitiesList");
            uniItem.empty();
            
            if (country === 'United Kingdom' || country === 'China') {
                bindUniversityList(
                    uniItem,
                    (country === 'United Kingdom') ? '#universitiesUK' : '#universitiesCN'
                );
                
                let drd = uniItem.parents('.dropdown');
    
                if (defaultValue && !drd.dropdown('get item', defaultValue)) {
                    uniItem.append('<div class="item" data-value="' + defaultValue + '">' + defaultValue + '</div>');
                }
    
                drd.dropdown('refresh');

                if (defaultValue) {
                    drd.dropdown('set selected', defaultValue);
                } else {
                    drd.dropdown('clear');
                }
                
                switchEduSchoolDropdown(obj, 2);
            } else {
                obj.find("input[name='edu_school_text']").val(defaultValue);
                switchEduSchoolDropdown(obj, 1);
            }
        }

        function switchEduSchoolDropdown(obj, type) {
            if (type === 1) {
                obj.find(".edu_course_text").show();
                obj.find(".edu_course_dropdown").hide();
                obj.find("input[name='edu_school_text']").attr("required", "true");
                obj.find("input[name='edu_school']").removeAttr("required");
            } else {
                obj.find(".edu_course_text").hide();
                obj.find("input[name='edu_school']").attr("required", "true");
                obj.find("input[name='edu_school_text']").removeAttr("required");
                
                let drd = obj.find(".edu_course_dropdown");
                
                drd.dropdown('destroy');
                drd.dropdown({
                    allowAdditions: true
                });
                drd.show();
            }
        }

        function bindUniversityList(obj, uniDataName) {
            obj.append(
                $(uniDataName).children().clone()
            );
        }
        
        function changeUntilNow(obj, prefix) {
            checkUntilNow(
                prefix + 'Item_' + obj.getAttribute('data-id'),
                prefix
            );
        }

        function checkUntilNow(parentId, prefix) {
            let dateToObj = $("#"+parentId).find("input[name='" + prefix + "_to']");
    
            if (allowEdit) {
                if ($("#" + parentId).find("input[name='" + prefix + "_untilNow']").prop("checked")) {
                    dateToObj.val("");
                    dateToObj.attr("disabled", true);
                } else {
                    dateToObj.attr("disabled", false);
                }
            }
        }

        function setEduCard(item, data) {
            if (data["country"]) {
                item.find(".country").html(data["country"]);
            }

            if (data["school"]) {
                item.find(".university").html(data["school"]);
            }

            if (data["from"]) {
                item.find(".from-time").html(
                    parseDateDMY(data["from"])
                );
            }

            if (data["untilNow"] == 1) {
                item.find(".to-time").html("至今");
            } else {
                item.find(".to-time").html(
                    parseDateDMY(data["to"])
                );
            }

            var courseData = "";

            if (data["course"]) {
                courseData = data["course"]
            }

            if (data["status"]) {
                courseData = courseData + (courseData ? " - " : "") + data["status"]
            }

            item.find(".courseName").html(courseData);

            if (data["degree"]) {
                let degree = data["degree"];

                if (data['degree_type'] && data['degree_type_text']) {
                    degree += (' (' + (
                        (data['degree_type_text'].indexOf(' ') < 0)
                            ? data['degree_type_text']
                            : data['degree_type_text'].substring(
                                data['degree_type_text'].indexOf(' ') + 1
                            )
                    ) + ')');
                }

                item.find(".degree").html(degree);
            }

            if (data["gpa"]) {
                _gpaConfig.forEach(i => {
                    i.data.forEach(v => {
                        if (data["gpa"] == v.value) {
                            item.find(".gpa").html("GPA:" + v.name);
                        }
                    })
                })
            }
        }

        function setEduData(template, data) {
            for (let key in data) {
                if (data.hasOwnProperty(key)) {
                    var dataItem = template.find("input[name='edu_" + key + "']");
    
                    if (dataItem.attr('type') === 'text') {
                        if (key === 'from' || key === 'to') {
                            dataItem.val(
                                parseDateDMY(data[key])
                            );
                        } else {
                            dataItem.val(data[key]);
                        }
                    }
    
                    if (key === 'status') {
                        template.find("input[name='edu_" + key + "'][value='" + data[key] + "']").attr("checked", "checked");
                    }
    
                    if (key === 'degree') {
                        dataItem = template.find("select[name='edu_" + key + "']");
                        dataItem.val(data[key]);
                    }

                    if (key === 'degree_type') {
                        let dropdownDataItem = dataItem.parents('.dropdown');

                        dropdownDataItem.dropdown('refresh');

                        if (data[key]) {
                            dropdownDataItem.dropdown('set selected', data[key]);

                            dropdownDataItem.parents('.line').removeClass('hidden');

                            dataItem.prop('required', true);
                        }
                    }

                    if (key === 'gpa') {
                        dataItem = template.find("input[name='edu_" + key + "']");
                        dataItem.val(data[key]);
                    }
    
                    if (key === 'country') {
                        dataItem = template.find("input[name='edu_country']");
                        dataItem.parents('.dropdown').dropdown('set selected', data[key]);
                        if (data[key] === "") {
                            dataItem.attr("data-status", false);
                        } else {
                            dataItem.attr("data-status", true);
                        }
                        setUniversityList(template, data[key], data['school']);
                    }
                }
            }
            
            setEduCard(template.find(".item-cart"), data);
        }
        
        function saveEduData(obj) {
            let item = obj.parents(".eduItem");

            let country = item.find("input[name='edu_country']").val();
            let school;

            if (country === 'United Kingdom' || country === 'China') {
                school = item.find("input[name='edu_school']").val()
            } else {
                school = item.find("input[name='edu_school_text']").val()
            }

            let tmpData = {
                'from': item.find("input[name='edu_from']").val(),
                'to': item.find("input[name='edu_to']").val(),
                'country': country,
                'school': school,
                'course': item.find("input[name='edu_course']").val(),
                'degree': item.find("select[name='edu_degree']").val(),
                'status': item.find(".edu_status:checked").val(),
                'gpa': item.find("input[name='edu_gpa']").val(),
            };

            if (tmpData.degree === 'Bachelor') {
                tmpData.degree_type =  item.find('input[name="edu_degree_type"]').val();
                tmpData.degree_type_text = item.find('input[name="edu_degree_type"]')
                    .siblings('.menu')
                    .find('.item.active.selected')
                    .text();
            } else {
                tmpData.degree_type = null;
                tmpData.degree_type_text = null;
            }

            educationalBackground[parseInt(item.data("id")) - 1] = tmpData;            
            saveCardToServer("educationalBackground",educationalBackground);
            resetEduBlock();
        }
        
        function addEduItem(data) {
            if ($("#eduTemplate").hasClass('loaded')) {
                cloneEduItem(data);
            } else {
                let eduInterval = setInterval(() => {
                    if ($("#eduTemplate").hasClass('loaded')) {
                        clearInterval(eduInterval);
                        cloneEduItem(data);
                    }
                }, 500);
            }
        }

        function cloneEduItem(data) {
            if ($("#eduBlock .eduItem").length < eduItemMax) {
                eduItemIndex++;
                var template = $("#eduTemplate").children(0).clone();
        
                template.attr('id', 'eduItem_' + eduItemIndex);
                template.attr('data-id', eduItemIndex);
                template.find(".edu_course_text").show();
                template.find(".edu_course_dropdown").hide();
                // var eduStatusOptionTemplate=$("#eduStatusOption").children(0).clone(true);
                template.find("input[name='edu_status'][value='Pending']").attr("id", "edu_status_Pending_" + eduItemIndex);
                template.find("input[name='edu_status'][value='Pending']").next().attr("for", "edu_status_Pending_" + eduItemIndex);
                template.find("input[name='edu_status'][value='Completed']").attr("id", "edu_status_Completed_" + eduItemIndex);
                template.find("input[name='edu_status'][value='Completed']").next().attr("for", "edu_status_Completed_" + eduItemIndex);
                if (data != undefined) {
                    setEduData(template, data);
                }
                template.find("input[name='edu_status']").attr('name', 'edu_status_' + eduItemIndex);
                template.find("input[name='edu_country']").attr('data-id', eduItemIndex);
                template.find(".removeButton").attr('data-id', eduItemIndex);
                $("#eduBlock").append(template);
                template.find("input[name='edu_country']").change(function () {
                    eduChangeCountry(this);
                });
                template.find("select[name='edu_degree']").change(function () {
                    let show = (
                        this.value === '{{\App\Enumerables\Degree::DEGREE_STRING[\App\Enumerables\Degree::BACHELOR]}}'
                    );

                    $(this).parents('.line')
                        .next('.line')
                        .toggleClass(
                            'hidden',
                            !show
                        )
                        .find('input[name="edu_degree_type"]')
                        .prop('required', show);
                });

                initCalendar('#eduItem_' + eduItemIndex + ' .experienceStartDate');
                initCalendar(
                    '#eduItem_' + eduItemIndex + ' .experienceEndDate',
                    (new Date().getFullYear() + 5).toString()
                );

                let element = $('#eduItem_' + eduItemIndex);

                initSetInputCheck(element);

                if (data === undefined || data === 'undefined') {
                    openCardEditor(element);
                }
        
                compareIssue();
            }
        }

        function removeEduItem(obj,saveToServer=false){    
            var itemId = obj.attr('data-id');
            removeEduData(itemId,saveToServer);      
            obj.remove();    
            scrollToOpenedEditor('#eduBlock');
            //resetEduBlock();       
        }        

        function resetEduData(item){
            index=parseInt(item.data("id"));
            if(educationalBackground[index-1]){
                setEduData(item,educationalBackground[index-1]);
                return true;
            }
            return false;
        }

        function removeEduData(index,saveToServer=false){            
            delete educationalBackground[index-1];
            if(saveToServer){                
                saveCardToServer("educationalBackground",educationalBackground);
            }
        }

        function setWorkCard(item,data){
            if(data.hasOwnProperty("jobTitle"))
                item.find(".country").html(data["jobTitle"]);

            if(data.hasOwnProperty("companyName"))
                item.find(".university").html(data["companyName"]);     
                
            if(data.hasOwnProperty("from"))
                item.find(".from-time").html(
                    parseDateDMY(data["from"])
                );

            if(data.hasOwnProperty("untilNow")) {
                if(data["untilNow"]==1){
                    item.find(".to-time").html("至今");
                }else{
                    if(data.hasOwnProperty("to")) {
                        item.find(".to-time").html(
                            parseDateDMY(data["to"])
                        );
                    }else{
                        item.find(".to-time").html("");
                    }
                }
            }else{
                item.find(".to-time").html("");
            }
            
            if(data.hasOwnProperty("jobDescription"))
                item.find(".courseName").html(data["jobDescription"]);
            
        }

        function setWorkData(template, data) {
            for (let key in data) {
                var dataItem = template.find("input[name='work_" + key + "']");
        
                if (dataItem.attr('type') === 'text') {
                    if (key === 'from' || key === 'to') {
                        dataItem.val(
                            parseDateDMY(data[key])
                        );
                    } else {
                        dataItem.val(data[key]);
                    }
                }
        
                if (key === 'untilNow') {
                    dataItem.prop("checked", data[key]);
                }
        
                if (key === 'jobDescription') {
                    template.find("textarea[name='work_" + key + "']").val(data[key]);
                }
            }
    
            setWorkCard(template.find(".item-cart"), data);
        }

        function saveWorkData(obj){
            var item=obj.parents(".workItem");
            workDataItem={
                'from': item.find("input[name='work_from']").val(),
                'to': item.find("input[name='work_to']").val(),
                'untilNow': item.find("input[name='work_untilNow']").prop('checked')?1:0,
                'jobTitle': item.find("input[name='work_jobTitle']").val(),
                'companyName': item.find("input[name='work_companyName']").val(),
                'jobDescription': item.find("textarea[name='work_jobDescription']").val()
            };
            if(paramsValidate(workDataItem)){
                removeCard(item);
            }else{
                index=parseInt(item.data("id"));
                workingExperience[index-1]=workDataItem;            
                checkUntilNow('workItem_'+item.data("id"),'work');
                setWorkData(item,workDataItem);  
                saveCardToServer("workingExperience",workingExperience);
                resetWorkBlock()        
            }              
        }

        function resetWorkBlock(){
            $("#workBlock").find(".workItem").remove();
            let data =[];
            for(let i in workingExperience) {
                data.push(workingExperience[i]);
            }            
            let  _data = qsort(data)
            workingExperience = _data;
            workItemIndex=0;
            setWorkBlock();
        }
        
        function addWorkItem(data){        
            if($("#workBlock .workItem").length<workItemMax){  
                workItemIndex++;
                var template=$("#workTemplate").children(0).clone();         
                var id=  'workItem_'+workItemIndex;
                template.attr('id',id) ;
                template.attr('data-id',workItemIndex)
                if(data!=undefined){
                    setWorkData(template,data);
                }
                template.find("input[name='work_untilNow']").attr('data-id',workItemIndex);
                template.find("input[name='work_untilNow']").attr('id','work_untilNow'+workItemIndex);
                template.find("input[name='work_untilNow']").next().attr('for','work_untilNow'+workItemIndex);
                template.find(".removeButton").attr('data-id',workItemIndex);
                
                $("#workBlock").append(template); 
                checkUntilNow(id,'work');
                initSetInputCheck($("#workItem_"+workItemIndex));
                let _workingEndDate = new Date().getFullYear()+1;                
                initCalendar("#" + id +" .workingStartDate")
                initCalendar("#" + id +" .workingEndDate",""+_workingEndDate+"")
                if(data==undefined){  
                    openCardEditor($('#workItem_'+workItemIndex));
                }
                compareIssue()
            }            
        }
                
        function removeWorkItem(obj,saveToServer=false){                       
            var itemId = obj.attr('data-id');
            obj.remove();                    
            removeWorkData(itemId,saveToServer);                   
            scrollToOpenedEditor('#workBlock');
            if(itemId==workItemIndex)
                workItemIndex--;
        }    

        function resetWorkData(item){
            index=parseInt(item.data("id"));
            if(workingExperience[index-1]){
                setWorkData(item,workingExperience[index-1]);
                return true;
            }
            return false;
        }

        function removeWorkData(index,saveToServer=false){            
            delete workingExperience[index-1];
            if(saveToServer){
                saveCardToServer("workingExperience",workingExperience);
            }
        }

        function setRefCard(item,data){
            if(data["name"])
                item.find(".country").html(data["name"]);

            if(data["jobTitle"])
                item.find(".university").html(data["jobTitle"]);     
                
            if(data["email"])
                item.find(".email").html(data["email"]);

            if(data["phone"])
                item.find(".phone").html(data["phone"]);

            var addressData="";
            if(data["address"])
                addressData=data["address"];
            if(data["postcode"])
                addressData=data["address"] + " " + data["postcode"];      
            item.find(".address").html(addressData);            
        }

        function setRefData(template,data){
            for(let key in data) {  
                var dataItem=template.find("input[name='ref_" + key + "']");
                if(dataItem.attr('type')=='text'){
                    dataItem.val(data[key]);
                }                    
            };            
            setRefCard(template.find(".item-cart"),data) ;
        }

        function saveRefData(obj){    
            var item=obj.parents(".refItem");
            refDataItem={
                'name': item.find("input[name='ref_name']").val(),
                'phone': item.find("input[name='ref_phone']").val(),
                'email': item.find("input[name='ref_email']").val(),
                'jobTitle': item.find("input[name='ref_jobTitle']").val(),
                'address': item.find("input[name='ref_address']").val(),
                'postcode': item.find("input[name='ref_postcode']").val()
            };
            if(paramsValidate(refDataItem)){
                removeCard(item);
            }else{
                index=parseInt(item.data("id"));
                referenceInformation[index-1]=refDataItem;
                saveCardToServer("referenceInformation",referenceInformation);
                checkUntilNow('refItem_'+item.data("id"),'ref');
                setRefData(item,refDataItem);
            }
           
            
        }

        function addRefItem(data){       
            if($("#refBlock .refItem").length<refItemMax){       
                refItemIndex++;
                var template=$("#refTemplate").children(0).clone();        
                var id=  'refItem_'+refItemIndex;
                template.attr('id',id) ;
                template.attr('data-id',refItemIndex)
                if(data!=undefined){                
                    setRefData(template,data);
                }
                template.find(".removeButton").attr('data-id',refItemIndex);            
                $("#refBlock").append(template); 
                initSetInputCheck($('#refItem_'+refItemIndex))
                if(data==undefined){  
                    openCardEditor($('#refItem_'+refItemIndex));
                }
            }
            
        }
        
        function removeRefItem(obj,saveToServer=false){            
            var itemId = obj.attr('data-id');
            obj.remove();
            removeRefData(itemId,saveToServer);                   
            scrollToOpenedEditor('#refBlock');
            if(itemId==refItemIndex)
                refItemIndex--;
        }

        function resetRefData(item){
            index=parseInt(item.data("id"));
            if(referenceInformation[index-1]){
                setRefData(item,referenceInformation[index-1]);
                return true;
            }
            return false;
        }

        function removeRefData(index,saveToServer=false){            
            delete referenceInformation[index-1];
            if(saveToServer){                
                saveCardToServer("referenceInformation",referenceInformation);
            }
        }

        function setAwardCard(item,data){
            if(data["title"])
                item.find(".country").html(data["title"]);

            if(data["date"])
                item.find(".timePeriod").html(
                    parseDateDMY(data["date"])
                );

            if(data["description"])
                item.find(".courseName").html(data["description"]);

            var placeLevelData="";
            if(data["place"])
                placeLevelData=data["place"];
            if(data["level"])
                placeLevelData=placeLevelData + " " + data["level"];      
            item.find(".university").html(placeLevelData);            
        }

        function setAwardData(template,data){
            for(let key in data) {  
                let dataItem = template.find("input[name='award_" + key + "'], select[name='award_" + key + "'], textarea[name='award_" + key + "']");

                if (key === 'date') {
                    dataItem.val(
                        parseDateDMY(data[key])
                    );
                } else {
                    dataItem.val(data[key]);
                }
            }
            setAwardCard(template.find(".item-cart"), data) ;
        }

        function saveAwardData(obj){    
            var item = obj.parents(".awardItem");
            let awardDataItem = {
                'title': item.find("input[name='award_title']").val(),
                'date': item.find("input[name='award_date']").val(),
                'place': item.find("input[name='award_place']").val(),
                'level': item.find("select[name='award_level']").val(),
                'description': item.find("textarea[name='award_description']").val(),                    
            };

            if(paramsValidate(awardDataItem)){
                removeCard(item);
            }else{
                index=parseInt(item.data("id"));
                awardWinningExperience[index-1]=awardDataItem;         
                saveCardToServer("awardWinningExperience",awardWinningExperience);   
                resetAwardBlock();                
            }      
        }
        
        function addAwardItem(data) {
            if ($("#awardTemplate").hasClass('loaded')) {
                cloneAwardItem(data);
            } else {
                let awardInterval = setInterval(() => {
                    if ($("#awardTemplate").hasClass('loaded')) {
                        clearInterval(awardInterval);
                        cloneAwardItem(data);
                    }
                }, 500);
            }
        }

        function cloneAwardItem(data) {
            if ($("#awardBlock .awardItem").length < awardItemMax) {
                awardItemIndex++;
                var template = $("#awardTemplate").children(0).clone();
                var id = 'awardItem_' + awardItemIndex;
                template.attr('id', id);
                template.attr('data-id', awardItemIndex);

                if (data != undefined) {
                    setAwardData(template, data);
                }
                template.find(".removeButton").attr('data-id', awardItemIndex);
                $("#awardBlock").append(template);
                initCalendar(['.awardItem .common_date_input_block_end_today'], today);
                initSetInputCheck($('#awardItem_' + awardItemIndex));
                if (data == undefined) {
                    openCardEditor($('#awardItem_' + awardItemIndex));
                }
            }
        }

        function removeAwardItem(obj,saveToServer=false) {
            removeAwardData(obj.attr('data-id'),saveToServer);
            obj.remove();             
            scrollToOpenedEditor('#awardBlock');
            //resetAwardBlock();
        }

        function resetAwardData(item) {
            index = parseInt(item.data("id"));
            if (awardWinningExperience[index-1]){
                setAwardData(item,awardWinningExperience[index-1]);
                return true;
            }
            return false;
        }

        function removeAwardData(index,saveToServer=false){            
            delete awardWinningExperience[index-1];
            if(saveToServer){                
                saveCardToServer("awardWinningExperience",awardWinningExperience);         
            }          
        }
        
        function saveCardData(obj){
            var item=obj.parents(".cardEditorItem");
            index=parseInt(item.data("id"));
            type=item.data("type");
            switch(type){
                case "edu":
                    saveEduData(obj);
                    break;
                case "work":
                    saveWorkData(obj);
                    break;
                case "ref":
                    saveRefData(obj);
                    break;
                case "award":
                    saveAwardData(obj);
                    break;
            }
            
        }
        function resetCardData(item){
            index=parseInt(item.data("id"));
            type=item.data("type");
            switch(type){
                case "edu":
                    return resetEduData(item);
                    break;
                case "work":
                    return resetWorkData(item);
                    break;
                case "ref":
                    return resetRefData(item);
                    break;
                case "award":
                    return resetAwardData(item);
                    break;
            }
            return false;
        }

        function closeRemoveCardlConfirmation(){
            $('#removeCardConfirmation').modal('hide');           
        }

        function removeCardConfirmCallback(){
            let id=$('#removeCardConfirmation').data("targetCard");
            let item=$("#" + id);
            removeCard(item,true);
            closeRemoveCardlConfirmation();
        }

        function removeCardConfirm(item){
            //let item=$(this).parents(".cardEditorItem");
            let id= item.attr('id');           
            type=item.data("type");
            canRemove=eval('$("#' + type + 'Block .' + type + 'Item").length > ' + type + 'ItemMin');
            if(canRemove){
                $('#removeCardConfirmation').data("targetCard",id);
                $('#removeCardConfirmation').modal('show');            
            } 
        }

        function removeCard(item,saveToServer=false){
            index=parseInt(item.data("id"));
            type=item.data("type");            
            switch(type){
                case "edu":
                    removeEduItem(item,saveToServer);
                    break;
                case "work":
                    removeWorkItem(item,saveToServer);
                    break;
                case "ref":
                    removeRefItem(item,saveToServer);
                    break;
                case "award":
                    removeAwardItem(item,saveToServer);
                    break;
            }
        }
        
        function openCardEditor(obj) {
            let _parents = obj.find(".item-cart"),
                _nextSiblings = _parents.next(".item-write-content");
            
            _parents.hide();
            _nextSiblings.show();
            // $(".cardEditorItem").each(function(){
            //     if(!($(this).data("type") == obj.data("type") && $(this).data("id")==obj.data("id"))){
            //         $(this).hide();
            //     }
            // });
            // $(".info-title").each(function(){
            //     if(!($(this).data("type") == obj.data("type"))){
            //         $(this).hide();
            //     }
            // });
            
            $(".addEduItem").hide();
            $(".item-cart-option-button .edit-button").hide();
            $(".applicationFormBtn").hide();       
            $(".langBlock").hide();                   
            inCardEditMode = true;     
            scrollToElement(_nextSiblings, -65);
        }

        function closeCardEditor(obj){
            let _parents = obj.find(".item-write-content"),
                _prevSiblings = _parents.prev(".item-cart");
            let _errorborders = _parents.find(".new-field"),
                _errorMessage = _parents.find(".errorMessage");

            _errorborders.each(function () {
                $(this).removeClass("errorBorder")
            });
            _errorMessage.each(function () {
                $(this).remove()
            });
            _parents.hide();
            _prevSiblings.show();
                
            
            $(".cardEditorItem").show();
            $(".info-title").show();
            $(".addEduItem").show();
            $(".applicationFormBtn").show();
            $(".langBlock").show(); 
            $(".item-cart-option-button .edit-button").show();
            inCardEditMode = false;     
        }
        
        function closeCanceCardlConfirmation(){
            $('#cancelCardEditor').modal('hide');
        }

        function cancelCard(){
            let id=$('#cancelCardEditor').data("targetCard");
            let item=$("#" + id);
            closeCardEditor(item); 
            if(!resetCardData(item)){
                removeCard(item);
            }
            closeCanceCardlConfirmation();
        }

        /*编辑*/
        $("body").on("click", '.edit-button', function () {
            openCardEditor($(this).parents(".cardEditorItem"));
        }).on("click", '.remove-button', function () { /*删除*/
            removeCardConfirm($(this).parents(".cardEditorItem"));
        }).on("click", '.cancel-button', function () { /*取消*/
            let item = $(this).parents(".cardEditorItem");
            let id = item.attr('id');
            $('#cancelCardEditor').data("targetCard", id);
            $('#cancelCardEditor').modal('show');
        }).on("click", ".save-button", function () { /*保存*/
            let element = $(this).parents(".cardEditorItem");
            let errorInput = checkAllInput(element);
            if (!errorInput) {
                saveCardData($(this));
                closeCardEditor($(this).parents(".cardEditorItem"));
            } else {
                scrollToElement($(errorInput).parents(".new-field,.new-field-radio"));
                console.log("Not saved");
            }
        });

        function sortData(data,fields){
            data.sort(function(a,b){
                return getSortOrder(a,b,fields,0);     
            });
        }

        function getSortOrder(a,b,fields,index){
            if(index>=fields.length)
                return 0;
            itemA=Date.parse(formatUKDate(a[fields[index]]));
            itemB=Date.parse(formatUKDate(b[fields[index]]));
            if(itemA){
                if(itemB){                        
                    if(itemA==itemB){
                        return getSortOrder(a,b,fields,index+1);
                    }else{
                        return itemB-itemA;
                    }
                }else{
                    return -1;
                }                    
            }else{
                return 1;
            }
        }

        function scrollToOpenedEditor(target){
            openEditor=$( target + " .item-write-content[style='display: block;']");
            if(openEditor.length>0){
                scrollToElement(openEditor.eq(0),-65);
            }     
        }

        function scrollToElement(element,offsetY=0){
            element.get(0).scrollIntoView();
            window.scrollBy(0, -100 + offsetY);
        }

        function compareIssue(){//对比日期大小
            let _edu_from = $('input[name="edu_from"]'),
                _edu_to = $('input[name="edu_to"]'),
                _work_from =  $('body input[name="work_from"]'),
                _work_to =  $('body input[name="work_to"]');

                $("#timeOfIssue").on("blur",function(){
                    checkPassportDate("#timeOfIssue",$(this).val());                    
                });

                $("#dateOfExpiry").on("blur",function(){
                    checkPassportDate("#dateOfExpiry",$(this).val());                   
                });
                _edu_from.unbind('blur');
                _edu_from.on('blur',function(){
                    $(this).removeClass("date-no-validate");
                    checkInput(this);
                    checkFromToDate($(this),"edu_from",$(this).val());
                });
                _edu_to.unbind('blur');
                _edu_to.on('blur',function(){
                    $(this).removeClass("date-no-validate");
                    checkInput(this);
                    checkFromToDate($(this),"edu_to",$(this).val());
                });
                _work_from.on('blur',function(){
                    checkFromToDate($(this),"work_from",$(this).val());
                });
                _work_to.on('blur',function(){
                    checkFromToDate($(this),"work_to",$(this).val());
                });
        }
        
        compareIssue();
    
        function checkedDateFormat(from, to){//对比日期大小
            let A = from.split("/")[2] + "/"+ from.split("/")[1] + "/"+ from.split("/")[0]
            let B = to.split("/")[2] + "/"+ to.split("/")[1] + "/"+ to.split("/")[0]
            let _from = new Date(A),
                _to = new Date(B);
                
            return _from.getTime() > _to.getTime();
        }

        function paramsValidate(params){//检查是否全为空
            let flag = true;
    
            for (var key in params) {
                if (key !== 'untilNow') {
                    if (params[key] !== '') flag = false;
                }
            }
            
            return flag;
        }
        
        function resetUniversityVal() {
            $('input[name="edu_school"]').change(function () {
                $(this).siblings(".edu_school_default_text").html($(this).val());
            });
        }
    </script>
    
    <script>
        /**
         * Initialize datepicker alias
         *
         * @param {string|[]} elements
         * @param {Date|string=} endDateLimit
         * @param {Date|string=} startDateLimit
         */
        function initCalendar(elements, endDateLimit, startDateLimit) {
            
            if (!Array.isArray(elements)) {
                elements = [elements];
            }
    
            if (elements.length < 1) {
                return;
            }

            endDateLimit = checkLayDateDateFormat(endDateLimit, true);
            startDateLimit = checkLayDateDateFormat(startDateLimit);
            
            elements.forEach(element => {
                if (element.indexOf('#') !== 0 || element.indexOf(' ') > -1) {
                    let items = document.querySelectorAll(element);

                    items.forEach(item => {
                        if (!item.id || item.classList.contains('reset-id')) {
                             item.id = 'item_' + (new Date().getTime()) + Math.floor(Math.random() * 1000);
                        }

                        initLayDateCallbacks(
                            item,
                            endDateLimit,
                            startDateLimit
                        )
                    });
                } else {
                    initLayDateCallbacks(
                        document.querySelector(element),
                        endDateLimit,
                        startDateLimit
                    )
                }
            });
        }

        /**
         * @param {HTMLInputElement} inputElement
         * @param {string} endDateLimit
         * @param {string} startDateLimit
         */
        function initLayDateCallbacks(inputElement, endDateLimit, startDateLimit) {
            if (!inputElement) {
                return;
            }

            if (inputElement.required) {
                inputElement.setAttribute('data-validate', 'checkInput');
                inputElement.setAttribute('data-clear-error', 'removeInputErrMsg');
            }

            $(inputElement).parents('.field.new-field').addClass('field-calendar-container');

            initLayDate(
                undefined,
                '#' + inputElement.id,
                endDateLimit,
                startDateLimit
            );
        }

        /**
         * Initialize LayDate datepicker
         *
         * @param {undefined} placeholder - MUST be UNDEFINED
         * @param {string} element
         * @param {string=} endDateLimit
         * @param {string=} startDateLimit
         */
        function initLayDate(placeholder, element, endDateLimit, startDateLimit) {
            laydate({
                elem: element,
                min: startDateLimit || '1980',
                max: endDateLimit || '',
                format: 'DD/MM/YYYY',
                choose: function (date,x) { //选择日期完毕的回调
                    laydateChoose(element,date);
                }
            });
        }
        
        /**
         * Check if date can be passed to LayDate
         *
         * @param {Date|string=} date
         * @param {boolean=} isEndDate
         * @return {string}
         */
        function checkLayDateDateFormat(date, isEndDate) {
            if (date) {
                if (typeof date === 'object') {
                    date = date.toISOString().split('T')[0];
                }
    
                if (date.indexOf(' ') < 0) {
                    if (isEndDate) {
                        date += ' 23:59:59';
                    } else {
                        date += ' 00:00:00';
                    }
                }
            } else {
                date = '';
            }
    
            return date;
        }
        function laydateChoose(element,date){            
            let elementName= $(element).attr("name");
            if(element=='#timeOfIssue' || element=='#dateOfExpiry'){
                checkPassportDate(element,date);
            }else if(elementName=="edu_from" || elementName=="edu_to"){
                checkFromToDate($(element),elementName,date);
            }else if(elementName=="work_from" || elementName=="work_to"){
                checkFromToDate($(element),elementName,date);
            }
            
        }
        function checkPassportDate(element,date){
            let _this = $(element);                
            setTimeout(function(){
                if(element=='#timeOfIssue'){
                    _timeOfIssueVal=date;
                    _dateOfExpiryVal= $("#dateOfExpiry").val();
                }else{
                    _timeOfIssueVal=$("#timeOfIssue").val();
                    _dateOfExpiryVal=date;
                }        
                if(_timeOfIssueVal == '' || _dateOfExpiryVal == '') return;
                if(checkedDateFormat(_timeOfIssueVal,_dateOfExpiryVal)){
                    addInputErrMsg(_this,'护照签发日期不能晚于截止时间')
                    setTimeout(() => {
                        _this.val("")
                    }, 100);
                } 
            }, 200);               
        }

        function checkFromToDate(object,elementName,date){
            let _fromValue=0,_toValue=0;
            
            setTimeout(function(){
                if(elementName=="edu_from"){
                    _fromValue=date;
                    _toValue=object.parents('.new-field').siblings('.new-field').find('input[name="edu_to"]').val();
                }else if(elementName=="edu_to"){
                    _fromValue=object.parents('.new-field').siblings('.new-field').find('input[name="edu_from"]').val();
                    _toValue=date;
                }else if(elementName=="work_from"){
                    _fromValue=date;
                    _toValue=object.parents('.new-field').siblings('.new-field').find('input[name="work_to"]').val();
                }else if(elementName=="work_to"){
                    _fromValue=object.parents('.new-field').siblings('.new-field').find('input[name="work_from"]').val();
                    _toValue=date;
                }
                if(_fromValue == '' || _toValue == '') return;
                if(checkedDateFormat(_fromValue,_toValue)){
                    addInputErrMsg(object,'起始日期不能晚于终止日期')
                    setTimeout(() => {
                        object.val("")
                    }, 100);
                } 
            }, 200);            
        }
    </script>
    
    <script>
        var pendingSearch = {
            uk: false,
            zh: false
        };
        
        $(function () {
            $('body').on('click', function (event) {
                if ($(event.target).parents('.address-field').length < 1) {
                    $('.address-field').removeClass('show-dropdown');
                }
            });

            $('.address-dropdown').on('click', function (event) {
                let target = event.target;

                if (!target.classList.contains('dropdown-item')) {
                    return;
                }

                let input = document.getElementById(this.getAttribute('data-input'));

                input.value = target.getAttribute('data-address');

                removeInputErrMsg(input);

                $(this).parents('.address-field')
                    .removeClass('show-dropdown');
            });

            $('.address-input').on('focus', function () {
                $('.address-field').removeClass('show-dropdown');

                let parent = $(this).parents('.address-field');

                if (parent.find('.address-dropdown')[0].children.length > 0) {
                    parent.addClass('show-dropdown');
                }
            });

            $('#uk-postcode').on('input', function () {
                getAddresses(
                    this.value,
                    this.getAttribute('data-type'),
                    this.getAttribute('data-address-input'),
                );
            });
    
            $('#china-postcode').on('input', function () {
                if ($('#country').val() === 'United Kingdom') {
                    getAddresses(
                        this.value,
                        this.getAttribute('data-type'),
                        this.getAttribute('data-address-input'),
                    );
                }
            });
        });

        function getAddresses(postcode, type, target) {
            if (
                postcode.length < 5
                || postcode.length > 8
            ) {
                updateDropdown(target);
                return;
            }
            
            if (pendingSearch[type]) {
                return;
            }
    
            pendingSearch[type] = true;
    
            $.ajax({
                url: '{{route('getAddressesByPostCode')}}',
                method: 'POST',
                data: {
                    _token: '{{csrf_token()}}',
                    postCode: postcode
                },
                success: function (data) {
                    pendingSearch[type] = false;
                    
                    updateDropdown(target, data)
                },
                error: function () {
                    pendingSearch[type] = false;
                }
            });
        }
        
        function updateDropdown(target, values) {
            values = values || [];

            if (values.length < 1) {
                return;
            }
            
            let dropdown = $('#' + target);
            
            dropdown.empty();

            let fragment = new DocumentFragment();

            values.forEach(function (value) {
                let item = document.createElement('div');
                    item.className = 'dropdown-item';
                    item.setAttribute('data-address', value);
                    item.textContent = value;

                fragment.appendChild(item);
            });

            dropdown.append(fragment);
            dropdown.parents('.address-field').addClass('show-dropdown');
        }

        let qsort = (arr) => {
            if (arr.length <= 1) {
                return arr;
            }
            let _untilNow = [],
                _to = [],
                _from = [];

            for (let i = 0, len = arr.length; i < len; i++) {
                if (arr[i].untilNow && arr[i].untilNow == 1) {
                    _untilNow.push(arr[i])
                } else if (arr[i].untilNow == 0 && arr[i].untilNow == NaN) {
                    _from.push(arr[i])
                } else {
                    _to.push(arr[i])
                }
            }
            
            return [
                ..._untilNow.sort(function (a, b) {
                    
                    let itemA = Date.parse(formatUKDate(a.from)),
                        itemB = Date.parse(formatUKDate(b.from));
                    return itemB - itemA
                }),

                ..._from.sort(function (a, b) {
                    
                    let itemA = Date.parse(formatUKDate(a.to)),
                        itemB = Date.parse(formatUKDate(b.to));
                    if (itemB) {
                        return itemB - itemA
                    } else {
                        let fields = ['to', 'from'];
                        return getSortOrder(a, b, fields, 0);
                    }

                }),
                ..._to.sort(function (a, b) {
                    let fields = ['to', 'from'];
                    return getSortOrder(a, b, fields, 0);
                }),
            ]
        }

        function formatUKDate(d){ 
            if(d){
                dateArray=d.split('/');
                return dateArray[2] + "/" + dateArray[1] + "/" + dateArray[0];
            }else{
                return d;
            }
            
        }
    </script>
@endsection